<template>
<header class="bg-dark-green">
  <div class="content near-white">
    <el-row>
      <el-col :span="8">
        <img class="logo" :src="Logo" alt="infinity"/>
      </el-col>
      <el-col :span="5">
        <el-menu
        :default-active="$route.path"
        class="tc el-menu-demo" mode="horizontal" router background-color="#137752" text-color="#F4F4F4" active-text-color="#ffd04b">
          <el-menu-item index="/home/square">首页</el-menu-item>
          <el-menu-item index="/home/quarter">个人中心</el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="8" :offset="1" class="mt10">
        <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
          <el-select  v-model="searchType" slot="prepend" placeholder="请选择">
            <el-option label="昵称" value="1"></el-option>
            <el-option label="标签" value="2"></el-option>
          </el-select>
          <el-button @click="handleClick" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="1" :offset="1" class="mt10">
        <el-button @click="handleLogout" class="v-btm" size="mini" type="danger" plain>登出</el-button>
      </el-col>
    </el-row>
  </div>
</header>
</template>

<script>
import Logo from './infinity.png';

export default {
  name: 'Header',
  data() {
    return {
      Logo,
      search: '',
      searchType: '1',
    };
  },
  methods: {
    handleSelect(value) {
      this.searchType = value;
    },
    handleClick() {
      this.$router.push({
        path: '/home/square',
        query: {
          tags: this.searchType === '1' ? '' : this.search,
          nickname: this.searchType === '2' ? '' : this.search,
        },
      });
    },
    handleLogout() {
      location.href = '/logout';
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
@import "./style.scss";
</style>

